<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保存节点属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .nav {
            float: left;
            width: 275px;
            border-right: 1px solid;
            height: 50%;
        }

        .content {
            margin-left: 275px;
            height: 50%;
        }

        .controller {
            position: fixed;
            width: 275px;
            height: 120px;
            background-color: yellowgreen;
            border: 1px solid #ddd;
            text-align: center;
            z-index: 99;
            top:50%;
        }

        .save, .outPut {
            padding: 8px 12px;
            background-color: #fff;
            border: 1px solid #ddd;

        }
    </style>
</head>
<body onload="init()">
<div class="container">
    <div class="nav" id="Palette"></div>
    <div class="content" id="Diagram"></div>
</div>
<div class="controller">
    <button class="save" onclick="save()">保存</button>
    <button class="outPut" onclick="makeSvg()">导出svg</button>
</div>
<script src="release/go.js"></script>
<script>

    function init() {
        if (window.goSamples) goSamples();
        $ = go.GraphObject.make;
        Diagram = $(go.Diagram, "Diagram", {
            "animationManager.duration": 800,
            "undoManager.isEnabled": true, // enable undo & redo
            "grid.visible": true,//绘制网格
            initialContentAlignment: go.Spot.Center,//默认居中排列
            allowDrop: true,  // must be true to accept drops from the Palette
        })

//坐标点的定位
        function nodeStyle() {
            return [
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)

            ]
        }

        //创建连接点


        function creatPonit(name, spot, output, input) {
            return $(go.Shape, "Circle",
                {
//                    fill: "transparent",
                    fill: "red",
                    stroke: null,  // this is changed to "white" in the showPorts function
                    desiredSize: new go.Size(8, 8),
                    alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                    portId: name,  // declare this object to be a "port"
                    fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                    fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                    cursor: "pointer"  // show a different cursor to indicate potential link point
                });
        }


        //加入模板

        Diagram.nodeTemplateMap.add("",  // the default category
            $(go.Node, "Spot", nodeStyle(),
                // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                $(go.Panel, "Auto",
                    $(go.Shape, "Rectangle",
                        {fill: "#00A9C9", stroke: null},
                        new go.Binding("figure", "figure")),
                    $(go.TextBlock,
                        {
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: "#000",
                            margin: 8,
                            maxSize: new go.Size(160, NaN),
                            wrap: go.TextBlock.WrapFit,
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay())
                ),
                creatPonit("T", go.Spot.Top, true, true)
            ));
        Diagram.nodeTemplateMap.add("Start",
            $(go.Node, "Spot", nodeStyle(),
                $(go.Panel, "Auto",
                    $(go.Shape, "Circle",
                        {
                            minSize: new go.Size(40),
                            fill: "#79C900",
                            stroke: null,
                            fromLinkable: true,
                            toLinkable: true
                        }),
                    $(go.TextBlock, "Start",
                        {font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "#000"},
                        new go.Binding("text"))
                ),
                creatPonit("T", go.Spot.Top, true, true)
            ));

        Diagram.nodeTemplateMap.add("End",
            $(go.Node, "Spot", nodeStyle(),
                $(go.Panel, "Auto",
                    $(go.Shape, "Circle",
                        {
                            minSize: new go.Size(40, 40),
                            fill: "#DC3C00",
                            stroke: null
                        }),
                    $(go.TextBlock, "End",
                        {font: "bold 11pt Helvetica, Arial, sans-serif", stroke: "#000"},
                        new go.Binding("text"))
                )
            ));

        Diagram.nodeTemplateMap.add("Comment",
            $(go.Node, "Auto", nodeStyle(),
                $(go.Shape, "File",
                    {fill: "#EFFAB4", stroke: null}),
                $(go.TextBlock,
                    {
                        margin: 5,
                        maxSize: new go.Size(200, NaN),
                        wrap: go.TextBlock.WrapFit,
                        textAlign: "center",
                        editable: true,
                        font: "bold 12pt Helvetica, Arial, sans-serif",
                        stroke: '#454545'
                    },
                    new go.Binding("text").makeTwoWay())
                // no ports, because no links are allowed to connect with a comment
            ));


        //连线模板
        Diagram.linkTemplate =
            $(go.Link,  // the whole link panel
                {
                    routing: go.Link.AvoidsNodes,
                    curve: go.Link.JumpOver,
                    corner: 5, toShortLength: 4,
                    relinkableFrom: true,
                    relinkableTo: true,
                    reshapable: true,
                    resegmentable: true,
                    // mouse-overs subtly highlight links:
                    mouseEnter: function (e, link) {
                        link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
                    },
                    mouseLeave: function (e, link) {
                        link.findObject("HIGHLIGHT").stroke = "transparent";
                    }
                },
                new go.Binding("points").makeTwoWay(),
                $(go.Shape,  // the highlight shape, normally transparent
                    {isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT"}),
                $(go.Shape,  // the link path shape
                    {isPanelMain: true, stroke: "gray", strokeWidth: 2}),
                $(go.Shape,  // the arrowhead
                    {toArrow: "standard", stroke: null, fill: "gray"}),
                $(go.Panel, "Auto",  // the link label, normally not visible
                    {visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
                    new go.Binding("visible", "visible").makeTwoWay(),
                    $(go.Shape, "RoundedRectangle",  // the label shape
                        {fill: "#F8F8F8", stroke: null}),
                    $(go.TextBlock, "Yes",  // the label
                        {
                            textAlign: "center",
                            font: "10pt helvetica, arial, sans-serif",
                            stroke: "#333333",
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay())
                )
            );


        //数据
        var model = $(go.TreeModel)
        model.nodeDataArray = [
            {category: "Start", text: "Start"},
            {text: "Step"},
            {text: "???", figure: "Diamond"},
            {category: "End", text: "End"},
            {category: "Comment", text: "Comment"}
        ]
        load()

        //模型工具栏
        Palette = $(go.Palette, "Palette", {
            "animationManager.duration": 800,
            "undoManager.isEnabled": true, // enable undo & redo
            nodeTemplateMap: Diagram.nodeTemplateMap,
            initialContentAlignment: go.Spot.Center,//默认居中排列
            allowDrop: true,  // must be true to accept drops from the Palette
        })
        Palette.model = model;

    }


    function save() {//将内容区的所有模型数据导出保存
        var jsonNodes = Diagram.model.toJson();
        console.log(jsonNodes)
    }
    function makeSvg() {
        var svg = Diagram.makeSvg({
//          scale: 0.5
        });
        window.open(svg)

    }
    var nodeJson = {
    }


    function load() {
        Diagram.model = go.Model.fromJson(nodeJson)
    }
</script>
</body>
</html>